<template>
  <div>
    <!-- header 标题栏 -->
    <mt-header fixed title="" style="background-color: #efcccc">
      <div slot="left">
        <router-link to="/"><img
          src="http://static.wdmcake.cn/public/wap/home/img/logo.png"
          alt=""
        /></router-link>
        
      </div>
      <div slot="right" v-if="$store.state.islogin">
        欢迎:{{ $store.state.name }}
      </div>
      <div slot="right" v-else >
        <router-link class="link" to="/register">注册</router-link>
        &nbsp;
        <router-link class="link" to="/login">登录</router-link>
      </div>
    </mt-header>
    <!-- 中间 -->
    <van-tabs v-model="active" title-active-color="red" animated="true"  style="margin-top: 40px; margin-bottom: 50px">
      <van-tab title="全部">
        <van-grid :border="false" :column-num="2" >
          
          <van-grid-item  style="padding:10px;">
            <router-link to="/xiangqing">
            <van-image
              style="width: 100%"
              src="http://static.wdmcake.cn/images/202102/thumb_img/2264_thumb_G_1612376408216.jpg"
            />
            </router-link>
            <span>经典黑森林蛋糕</span>
            <p>¥188<van-icon size="20" name="cart" color="red" /></p>
            
          </van-grid-item>
          <van-grid-item class="dangao"   style="padding:10px;">
            
            <van-image
              style="width: 100%"
              text=""
              src="http://static.wdmcake.cn/images/202103/thumb_img/3630_thumb_G_1616005878660.jpg"
            />
            <span>甜心小公主蛋糕</span>
            <p> ¥208 <van-icon size="20"  name="cart" color="red" /></p>
            
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="新品上市">
        <van-grid :border="false" :column-num="2" >
          <van-grid-item class="dangao"   style="padding:10px;">
            <van-image
              style="width: 100%"
              text=""
              src="http://static.wdmcake.cn/images/202103/thumb_img/3630_thumb_G_1616005878660.jpg"
            />
            <span>甜心小公主蛋糕</span>
            <p> ¥208 <van-icon size="20"  name="cart" color="red" /></p>
            
          </van-grid-item>
          <van-grid-item  style="padding:10px;">
            <van-image
              style="width: 100%"
              src="http://static.wdmcake.cn/images/202103/thumb_img/3632_thumb_G_1616004118962.jpg"
            />
            <span>松桃贺寿蛋糕</span>
            <p> ¥188 <van-icon size="20"  name="cart" color="red" /></p>
            
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="经典甄选">
        <van-grid :border="false" :column-num="2">
          <van-grid-item>
            <van-image
              style="width: 100%"
              text=""
              src="http://static.wdmcake.cn/images/202108/thumb_img/2261_thumb_G_1629226007585.jpg"
            />
            <span>每日秒杀</span>
            <p> ¥208 <van-icon size="20"  name="cart" color="red" /></p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              style="width: 100%"
              src="http://static.wdmcake.cn/images/201910/thumb_img/2262_thumb_G_1570496820727.jpg"
            />
            <span>热销专区</span>
            <p> ¥208 <van-icon size="20"  name="cart" color="red" /></p>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="萌宝之选">
        <van-grid :border="false" :column-num="2">
          <van-grid-item>
            <van-image
              style="width: 100%"
              text="每日秒杀"
              src="http://static.wdmcake.cn/images/201907/thumb_img/2251_thumb_G_1563836876020.jpg"
            />
            <span>每日秒杀</span>
            <p> ¥208 <van-icon size="20"  name="cart" color="red" /></p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              style="width: 100%"
              src="http://static.wdmcake.cn/images/201907/thumb_img/2248_thumb_G_1563839051972.jpg"
            />
            <span>热销专区</span>
            <p> ¥208 <van-icon size="20"  name="cart" color="red" /></p>
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
    <!-- 底部 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="home">
        <img
          v-if="selected == 'home'"
          src="@/assets/common/001.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/002.png" alt="" slot="icon" />
        首页</mt-tab-item
      >
      <mt-tab-item id="fenlei">
        <img
          v-if="selected == 'fenlei'"
          src="@/assets/common/003.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/004.png" alt="" slot="icon" />
        商品</mt-tab-item
      >
      <mt-tab-item id="shop">
        <img
          v-if="selected == 'shop'"
          src="@/assets/common/005.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/009.png" alt="" slot="icon" />
        购物车</mt-tab-item
      >
      <mt-tab-item id="me">
        <img
          v-if="selected == 'me'"
          src="@/assets/common/010.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/008.png" alt="" slot="icon" />
        我的</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navactive: "1",
      selected: "fenlei",
      active: "1",
    };
  },
  watch: {
    // 监听底部选项卡
    selected(newValue, oldValue) {
      console.log(newValue);
      if (newValue == "home") {
        this.selected = "fenlei";
        this.$router.push("/");
      } else if (newValue == "shop") {
        this.selected = "fenlei";
        this.$router.push("/shop");
      } else if (newValue == "me") {
        this.selected = "fenlei";
        this.$router.push("/me");
      }
    },
  },
};
</script>

<style scoped>
  .dangao p {
    width: 100%;
   color:red;
   text-align: left;
   font-size: 18px;
  }
  .dangao p i{
   text-align: right;
   
  }
  
</style>
